<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2017/12/11 0011
  Time: 10:32
  To change this template use File | Settings | File Templates.
--%>
<%@page pageEncoding="utf-8" contentType="text/html;charset=utf-8" %>
<%@ include file="../../include/import.jsp" %>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }

        .wrap {
            width: 7.5rem;
        }

        .top {
            position: relative;
            width: 100%;
            height: 4.2rem;
        }

        .honor {
            width: 100%;
            height: 100%;
            vertical-align: top;
        }

        .star {
            position: absolute;
            height: 0.42rem;
            top: 0.3rem;
            left: 0;
            right: 0;
            margin: auto;
        }

        .honor_text {
            position: absolute;
            top: 2.68rem;
            left: 2.61rem;
            font-size: 0.36rem;
            font-family: "PingFang";
            color: rgb(255, 255, 255);
            font-weight: bold;
        }

        .middle_title {
            position: relative;
            width: 100%;
            padding-top: 0.4rem;
            display: flex;
            justify-content: center;
            align-items: center;
            padding-bottom: 0.12rem;
        }

        .middle_title_text {
            height: 0.77rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-right: 0.37rem;
            margin-left: 0.37rem;
        }

        .middle_title_text h2 {
            font-size: 0.36rem;
            line-height: 0.36rem;
            font-family: "PingFang";
            color: rgb(26, 26, 26);
            font-weight: bold;
            display: inline-block;
        }

        .middle_title_text span {
            margin-top: 0.1rem;
            font-size: 0.24rem;
            font-family: "PingFang";
            color: rgb(153, 153, 153);
            font-weight: bold;
        }

        .short_line {
            width: 0.5rem;
            height: 0.04rem;
            background-color: rgb(250, 110, 110);
        }

        .middle_content {

        }

        .pronunciation,
        .grammar,
        .vocabulary,
        .delivery,
        .comprehension {
            margin-left: 0.24rem;
            margin-right: 0.24rem;
            border-bottom: 0.01rem solid rgb(229, 229, 229);
        }

        .second_title {
            margin-top: 0.3rem;
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }

        .logo {
            width: 0.36rem;
            height: 0.36rem;
        }

        .second_title h3 {
            font-size: 0.34rem;
            font-family: "PingFang";
            color: rgb(51, 51, 51);
            margin-right: 0.18rem;
            margin-left: 0.08rem;
            font-weight: 400;
        }

        .second_title span {
            font-size: 0.3rem;
            font-family: "SFProText";
            color: rgb(153, 153, 153);
        }

        .grade_area {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-top: 0.14rem;
            margin-bottom: 0.14rem;
        }

        .grade-bg {
            width: 6rem;
            height: 0.4rem;
            border-radius: 0.2rem/0.2rem;
            background-color: rgb(245, 245, 245);
        }

        .grade {
            width: 2rem;
            height: 0.4rem;
            border-bottom-left-radius: 0.2rem;
            border-top-left-radius: 0.2rem;
            /*background-color: rgb(255, 178, 103);*/
        }

        .pronunciation .grade {
            background-color: rgb(255, 178, 103);
        }

        .grammar .grade {
            background-color: rgb(91, 220, 137);
        }

        .vocabulary .grade {
            background-color: rgb(125, 165, 255);
        }

        .delivery .grade {
            background-color: rgb(255, 127, 170);
        }

        .comprehension .grade {
            background-color: rgb(255, 217, 103);
        }

        .score {
            margin-left: 0.35rem;
            font-size: 0.4rem;
            font-family: "PingFang";
            color: rgb(26, 26, 26);
            font-weight: bold;
        }

        .score_explain {
            font-size: 28px;
            font-family: "PingFang";
            color: rgb(153, 153, 153);
            margin-bottom: 0.3rem;
        }

        .teacher_comment_text {
            font-size: 0.3rem;
            font-family: "SFProText";
            color: rgb(26, 26, 26);
            line-height: 0.45rem;
            margin-top: 0.32rem;
            margin-left: 0.24rem;
            margin-right: 0.24rem;
        }

        .tea_info {
            width: 100%;
            text-align: center;
            padding-bottom: 1.9rem;
        }

        .tea_info img {
            width: 1.2rem;
            height: 1.2rem;
            margin-top: 0.32rem;
            border-radius: 50%;
        }

        .tea_name {
            font-size: 0.3rem;
            font-family: "SFProText";
            color: rgb(26, 26, 26);
        }
    </style>
</head>

<body>
<div id="wrap">
    <div class="top">
        <img class="star" src="${ctx}/resource/returnReport/img/二星@2x.png" />
        <img class="honor" src="${ctx}/resource/returnReport/img/勋章@2x.png" />
        <h2 class="honor_text">初级能力等级</h2>
    </div>
    <div class="middle">
        <div class="middle_title">
            <div class="short_line"></div>
            <div class="middle_title_text">
                <h2>能力分析</h2>
                <span>Language Skills</span>
            </div>
            <div class="short_line"></div>
        </div>
        <div class="middle_content">
            <!--发音-->
            <div class="pronunciation">
                <div class="second_title">
                    <img class="logo" src="${ctx}/resource/returnReport/img/发音icon@2x.png" />
                    <h3>发音</h3><span>Pronunciation</span>
                </div>
                <div class="grade_area">
                    <div class="grade-bg">
                        <div class="grade"></div>
                    </div>
                    <span class="score">2分</span>
                </div>
                <p class="score_explain">发音稍显困难，容易出现较多的单词发音拼读错误，尚未熟练掌握英语的语音语调，发音技巧掌握不够纯熟，听者能理解部分所要表达的意思。</p>
            </div>
            <!--语法-->
            <div class="grammar">
                <div class="second_title">
                    <img class="logo" src="${ctx}/resource/returnReport/img/语法icon@2x.png" />
                    <h3>语法</h3><span>Grammar</span>
                </div>
                <div class="grade_area">
                    <div class="grade-bg">
                        <div class="grade"></div>
                    </div>
                    <span class="score">1分</span>
                </div>
                <p class="score_explain">语法知识比较薄弱，在语法的使用上局限性较明显，只会使用一些基本的简单句，而不太会使用较复杂的句型，容易因为语法的不足而限制想要表达的观点。</p>

            </div>
            <!--词汇-->
            <div class="vocabulary">
                <div class="second_title">
                    <img class="logo" src="${ctx}/resource/returnReport/img/词汇icon@2x.png" />
                    <h3>词汇</h3><span>Vocabulary</span>
                </div>
                <div class="grade_area">
                    <div class="grade-bg">
                        <div class="grade"></div>
                    </div>
                    <span class="score">1分</span>
                </div>
                <p class="score_explain">语法知识比较薄弱，在语法的使用上局限性较明显，只会使用一些基本的简单句，而不太会使用较复杂的句型，容易因为语法的不足而限制想要表达的观点。</p>
            </div>
            <!--流利度-->
            <div class="delivery">
                <div class="second_title">
                    <img class="logo" src="${ctx}/resource/returnReport/img/流利度icon@2x.png" />
                    <h3>流利度</h3><span>Delivery</span>
                </div>
                <div class="grade_area">
                    <div class="grade-bg">
                        <div class="grade"></div>
                    </div>
                    <span class="score">1分</span>
                </div>
                <p class="score_explain">语法知识比较薄弱，在语法的使用上局限性较明显，只会使用一些基本的简单句，而不太会使用较复杂的句型，容易因为语法的不足而限制想要表达的观点。</p>
            </div>
            <!--理解度-->
            <div class="comprehension">
                <div class="second_title">
                    <img class="logo" src="${ctx}/resource/returnReport/img/理解度icon@2x.png" />
                    <h3>理解度</h3><span>Comprehension</span>
                </div>
                <div class="grade_area">
                    <div class="grade-bg">
                        <div class="grade"></div>
                    </div>
                    <span class="score">1分</span>
                </div>
                <p class="score_explain">语法知识比较薄弱，在语法的使用上局限性较明显，只会使用一些基本的简单句，而不太会使用较复杂的句型，容易因为语法的不足而限制想要表达的观点。</p>
            </div>
        </div>
    </div>
    <div class="bottom">
        <div class="middle_title">
            <div class="short_line"></div>
            <div class="middle_title_text">
                <h2>外教评语</h2>
                <span>Teacher Comment</span>
            </div>
            <div class="short_line"></div>
        </div>
        <p class="teacher_comment_text">In the Orient young bulls are tested for the fight arena in a certain manner. Each is brought to the ring and allowed to attack a picador who pricks them with a lance. The bravery of each bull is then rated with care according to the number of times he demonstrates his willingness to charge in spite of the sting of the blade. Henceforth will I recognize that each day I am tested by life in like manner. If I persist, if I continue to try, if I continue to charge forward, I will succeed.
        </p>
        <div class="tea_info">
            <img src="${ctx}/resource/returnReport/img/头像.png" />
            <p class="tea_name">Jake Echeverria</p>
        </div>
    </div>
</div>
</body>

</html>
<script src="${ctx}/resource/returnReport/js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script src="${ctx}/resource/returnReport/js/base.js" type="text/javascript" charset="utf-8"></script>
<script src="${ctx}/resource/returnReport/js/jquery.md5.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    var Timestamp = Date.parse(new Date()) / 1000;
    var SignInfoData = $.md5(Timestamp + 'nativetalk');
    var url = "${ctx}/app/2/token/member/return/port";
    $.ajax({
        type: "post",
        url: url,
        headers: {
            'Content-Type': 'application/json',
            'Timestamp': Timestamp,
            'SignInfo': SignInfoData,
            'client_type': 1,
            "token": '${token}',
        },
        cache: false,
        async: false,
        dataType: "json",
        success: function(data, textStatus, jqXHR) {
            console.log(data)
            //星级评定
            if(data.obj.com_grade == 1) {
                $('.star').attr("src", "${ctx}/resource/returnReport/img/一星@2x.png");
                $('.honor_text').text('入门能力等级');
            } else if(data.obj.com_grade == 2) {
                $('.star').attr("src", "${ctx}/resource/returnReport/img/二星@2x.png");
                $('.honor_text').text('初级能力等级');
            } else if(data.obj.com_grade == 3) {
                $('.star').attr("src", "${ctx}/resource/returnReport/img/三星@2x.png");
                $('.honor_text').text('中级能力等级');
            } else if(data.obj.com_grade == 4) {
                $('.star').attr("src", "${ctx}/resource/returnReport/img/四星@2x.png");
                $('.honor_text').text('高级能力等级');
            } else {
                $('.star').attr("src", "${ctx}/resource/returnReport/img/四星@2x.png");
                $('.honor_text').text('高级能力等级');
            };
            //发音
            if(data.obj.pronunciation == 1) {
                $('.pronunciation .score').text(data.obj.pronunciation + '分')
                $('.pronunciation .grade').css({
                    'width': '1.5rem'
                })
                $('.pronunciation .score_explain').text('发音较为困难，大多数单词都出现误读和发音错误的情况，语调和重音的掌握较生疏，听者较难理解所表达的意思。')
            } else if(data.obj.pronunciation == 2) {
                $('.pronunciation .score').text(data.obj.pronunciation + '分')
                $('.pronunciation .grade').css({
                    'width': '3rem'
                })
                $('.pronunciation .score_explain').text('发音稍显困难，容易出现较多的单词发音拼读错误，尚未熟练掌握英语的语音语调，发音技巧掌握不够纯熟，听者能理解部分所要表达的意思。')
            } else if(data.obj.pronunciation == 3) {
                $('.pronunciation .score').text(data.obj.pronunciation + '分')
                $('.pronunciation .grade').css({
                    'width': '4.5rem'
                })
                $('.pronunciation .score_explain').text('发音较准确，较少出现单词发音错误或误读，对重音和语调的把握较熟练， 连读、弱读、爆破音掌握较纯熟，听者能理解大部分所要表达的意思。')
            } else if(data.obj.pronunciation == 4) {
                $('.pronunciation .score').text(data.obj.pronunciation + '分')
                $('.pronunciation .grade').css({
                    'width': '6rem',
                    'borderRadius': '0.2rem/0.2rem'
                })
                $('.pronunciation .score_explain').text('发音准确，单词发音清晰，极少出现误读或发音错误的情况。语调自然，连读、重音掌握熟练，听者基本能理解所要表达的意思。')
            };
            //语法
            if(data.obj.grammar == 1) {
                $('.grammar .score').text(data.obj.grammar + '分')
                $('.grammar .grade').css({
                    'width': '1.5rem'
                })
                $('.grammar .score_explain').text('语法知识比较薄弱，在语法的使用上局限性较明显，只会使用一些基本的简单句，而不太会使用较复杂的句型，容易因为语法的不足而限制想要表达的观点。')
            } else if(data.obj.grammar == 2) {
                $('.grammar .score').text(data.obj.grammar + '分');
                $('.grammar .grade').css({
                    'width': '3rem'
                });
                $('.grammar .score_explain').text('语法知识稍显薄弱，容易混淆语态、时态、词性等语法难点，能够流畅使用简单句表达简短的观点，但复合句和复杂句型的使用较生疏。');
            } else if(data.obj.grammar == 3) {
                $('.grammar .score').text(data.obj.grammar + '分')
                $('.grammar .grade').css({
                    'width': '4.5rem'
                })
                $('.grammar .score_explain').text('语法掌握较熟练，一定程度上能够有效准确地运用合适的语法表达观点，但仍存在一些错误的语法使用习惯。')
            } else if(data.obj.grammar == 4) {
                $('.grammar .score').text(data.obj.grammar + '分')
                $('.grammar .grade').css({
                    'width': '6rem',
                    'borderRadius': '0.2rem/0.2rem'
                })
                $('.grammar .score_explain').text('语法知识扎实，能够准确有效地运用合适的语法表达自己的观点，熟练掌握基础和复杂的语法结构，拥有良好的语法使用习惯。')
            };
            //词汇
            if(data.obj.vocabulary == 1) {
                $('.vocabulary .score').text(data.obj.vocabulary + '分')
                $('.vocabulary .grade').css({
                    'width': '1.5rem'
                })
                $('.vocabulary .score_explain').text('词汇量在500~1500左右，词汇量比较匮乏，只能运用最基本的词汇。')
            } else if(data.obj.vocabulary == 2) {
                $('.vocabulary .score').text(data.obj.vocabulary + '分');
                $('.vocabulary .grade').css({
                    'width': '3rem'
                });
                $('.vocabulary .score_explain').text('词汇量在1500-3000左右，词汇量较为有限，能使用简单的单词、短语，固定搭配进行表达。');
            } else if(data.obj.vocabulary == 3) {
                $('.vocabulary .score').text(data.obj.vocabulary + '分')
                $('.vocabulary .grade').css({
                    'width': '4.5rem'
                })
                $('.vocabulary .score_explain').text('词汇量在3000-5500左右，词汇量较多，能够比较好地运用单词和短语，了解词性的变化和多样性，能过阅读比较长的英文文章')
            } else if(data.obj.vocabulary == 4) {
                $('.vocabulary .score').text(data.obj.vocabulary + '分')
                $('.vocabulary .grade').css({
                    'width': '6rem',
                    'borderRadius': '0.2rem/0.2rem'
                })
                $('.vocabulary .score_explain').text('词汇量在5500-8000左右，词汇量充足，能够很好的运用单词短语搭配，对词性的多样性、同义词运用掌握很好，能读懂大部分的长篇英文文章和小说。')
            };
            //流利度
            if(data.obj.delivery == 1) {
                $('.delivery .score').text(data.obj.delivery + '分')
                $('.delivery .grade').css({
                    'width': '1.5rem'
                })
                $('.delivery .score_explain').text('流利程度易卡顿结巴，表达想法和回答问题比较薄弱，语言逻辑不够清晰，对话交流比较吃力。')
            } else if(data.obj.delivery == 2) {
                $('.delivery .score').text(data.obj.delivery + '分');
                $('.delivery .grade').css({
                    'width': '3rem'
                });
                $('.delivery .score_explain').text('流利程度尚可，说话容易结巴磕绊，在表达自己熟悉的观点想法时比较流利，但一般情况下思考时间较久，常出现停顿，语言表达逻辑和连贯性较薄弱；');
            } else if(data.obj.delivery == 3) {
                $('.delivery .score').text(data.obj.delivery + '分')
                $('.delivery .grade').css({
                    'width': '4.5rem'
                })
                $('.delivery .score_explain').text('流利程度好，在表达对自己熟悉的观点想法的时候很流利，很容易把握交流方向。但是在进行复杂的交流讨论时，较常出现卡顿、不流畅的现象，总体组织语 言逻辑能力比较好；')
            } else if(data.obj.delivery == 4) {
                $('.delivery .score').text(data.obj.delivery + '分')
                $('.delivery .grade').css({
                    'width': '6rem',
                    'borderRadius': '0.2rem/0.2rem'
                })
                $('.delivery .score_explain').text('流利程度很好，说话基本不容易结巴和磕绊。表达能力强，能够自然流畅地表达自己的想法观点，沟通交流也很顺畅，语言逻辑清晰明了')
            };
            //理解度
            if(data.obj.comprehension == 1) {
                $('.comprehension .score').text(data.obj.comprehension + '分')
                $('.comprehension .grade').css({
                    'width': '1.5rem'
                })
                $('.comprehension .score_explain').text('理解能力薄弱，掌握简单单词和词汇的意思，对较长句子的理解力略低。不能够准确理解说话者表达的意思。')
            } else if(data.obj.comprehension == 2) {
                $('.comprehension .score').text(data.obj.comprehension + '分');
                $('.comprehension .grade').css({
                    'width': '3rem'
                });
                $('.comprehension .score_explain').text('理解能力尚可，慢语速下能基本理解说话者观点，但反应速度略慢。语速提升后，易产生理解障碍。');
            } else if(data.obj.comprehension == 3) {
                $('.comprehension .score').text(data.obj.comprehension + '分')
                $('.comprehension .grade').css({
                    'width': '4.5rem'
                })
                $('.comprehension .score_explain').text('理解能力良好，正常语速下能理解说话者观点并做出正确回应。但在较快语速时，容易遗漏一些内容。')
            } else if(data.obj.comprehension == 4) {
                $('.comprehension .score').text(data.obj.comprehension + '分')
                $('.comprehension .grade').css({
                    'width': '6rem',
                    'borderRadius': '0.2rem/0.2rem'
                })
                $('.comprehension .score_explain').text('理解能力优秀。能够很好的理解各语速下说话者表达的意思，并能准确及时地做出回应。')
            };
            //老师评语
            $('.teacher_comment_text').text(data.obj.com_content);
            //老师头像
            var tea_head_portrait =data.obj.tea_head_portrait;
            if(tea_head_portrait.slice(0,4)!=='http'){
                tea_head_portrait='http://file.waijiaojun.com/'+data.obj.tea_head_portrait;
            }
            $('.tea_info img').attr('src', tea_head_portrait);
            //老师名字
            $('.tea_name').text(data.obj.tea_name);

        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert("请求失败！");
        }
    });
</script>
